<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--在head的style中定义，在当前页面中可以被复用-->
    <style>
        .xxx {
            background-color: red;
            color: green;
            font-size: 60px;
            font-weight: 400;
            font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
        }

        #m1 {
            background-color: green;
            height: 100px;
        }

        a {
            color: yellow;
        }

        .yy li {
            color: pink;
        }

        .yy > a {
            color: red;
        }

        .yy > div > a {

        }

        input[type='password'] {

        }

        .v1[xx='456'] {

        }

        .header {
            background-color: black;

            height: 48px;
            line-height: 48px;
        }

        .header > a {
            color: white;
        }
    </style>
</head>
<body>
<div>
    <div style="background-color: red;color: green;">大多数发</div>
    <div style="background-color: red;color: green;">大多数发</div>
    <div style="background-color: red;color: green;">大多数发</div>
</div>
<div class="xxx">类选择器</div>
<div id='m1'>Id选择器</div>

<div>sdf</div>
<div>
    <a>标签选择器</a>
</div>
<div>sdf</div>
<a>asdf</a>
<a>asdf</a>
<a>asdf</a>
<span>111</span>
<span>111</span>
<span>111</span>

<div class="yy">
    <a>后代选择器</a>
    <div>
        <a>谷歌</a>
    </div>
    <ul>
        <li>美国</li>
        <li>日本</li>
        <li>韩国</li>
    </ul>
    <div>
        <div>
            <a>必应</a>
        </div>
    </div>
</div>

<!--属性选择器-->
<input type="text">
<input type="password">

<div class="v1" xx="123">s</div>
<div class="v1" xx="456">f</div>
<div class="v1" xx="999">a</div>
<div style="width: 500px;border: 1px solid red;">
    <h2 style="text-align: center">用户注册</h2>
</div>

<div class="header">
    <a>小米手机</a>
    <a>小米电视</a>
    <a>小米手环</a>
</div>

<div style="width: 500px;">
    <span style="float: left">中国</span>
    <span style="float: right">联通</span>
</div>

</body>
</html>